import React from 'react'
import ActionDone from 'material-ui/svg-icons/action/done';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import FlatButton from 'material-ui/FlatButton';
import Dialog from 'material-ui/Dialog';
import $ from 'jquery';

export default class SurveySubmitter extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            open: false,
        }
        this.handleClose = this.handleClose.bind(this)
        this.handleOpen = this.handleOpen.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleClose(){
        this.setState({
            open: false
        })
    }
    handleOpen(){
        this.setState({
            open: true
        })
    }

    handleSubmit(){
        console.log('To handle submit')

        this.submit(this.format(this.props.survey))

        this.handleClose()
    }

    format(survey){
        const result = {
            Describe: '',
            QuestionCollection: [],
            Title: '',
        }

        result.Title = survey.title
        result.QuestionCollection = survey.questions.map(question => {
            const QuestionOptionCollection = question.options.map(option => {
                return {
                    Describe: option.text
                }
            })

            return {
                Describe: question.title,
                QuestionOptionCollection,
                Type: 0,//TODO: Add multiple option
            }
        })

        console.log(JSON.stringify(result))

        return result
    }

    submit(data){
        $.ajax({
            url: '/api/CreateQuestionnaire',
            method: 'POST',
            data,
            // traditional: true,
        }).then(res=>{
            if(!res.IsOk){
                alert('创建问卷失败')
                return
            }
            alert('创建问卷成功')
            console.info('Survey submit OK,please check the network')
        },err=>{
            alert('服务器响应错误')
            console.warn('Survey submit error! Server response fail.')
        })
    }

    render() {
        const actions = [
            <FlatButton
                label="Cancel"
                primary={true}
                onClick={this.handleClose}
            />,
            <FlatButton
                label="OK"
                primary={true}
                // keyboardFocused={true}
                onClick={this.handleSubmit}
            />,
        ]

        return (
            <div>
                <FloatingActionButton onClick={this.handleOpen}>
                    <ActionDone/>
                </FloatingActionButton>
                <Dialog
                    actions={actions}
                    modal={false}
                    open={this.state.open}
                    contentStyle={{width: '350px'}}
                    onRequestClose={this.handleClose}>

                    Confirm Add Survey?

                </Dialog>
            </div>
        )
    }
}
